<template>
	<div class="goods">
		<van-sticky>
			<van-nav-bar :title="view_title" 
						 :safe-area-inset-top="true" 
						 :placeholder="true"
						 left-text="返回"
						 left-arrow
						 @click-left="onClickLeft" />
		</van-sticky>
		
		<div class="contents">
			<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">api 测试</van-divider>
			<!-- <van-divider dashed>api 测试</van-divider> -->
			<van-progress :percentage="api_testing.percentage" :pivot-text="api_testing.text" stroke-width="10" />
			<br>
			<br>
			
			<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">Socket 测试</van-divider>
			<van-progress :percentage="socket_testing.percentage" :pivot-text="socket_testing.text" stroke-width="10" />
			<br>
			<br>
			
			<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">Redis 测试</van-divider>
			<van-progress :percentage="redis_testing.percentage" :pivot-text="redis_testing.text" stroke-width="10" />
			<br>
			<br>
			
			<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">总进度</van-divider>
			<van-progress :percentage="count_testing.percentage" stroke-width="10" />
			<br>
			<br>
		</div>
		
		<van-action-sheet v-model="ShowRunningResults" title="运行结果报告">
			<div class="content">
				<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">api 测试结果</van-divider>
				<van-row>
					<van-col>结果：{{api_testing.result}}</van-col>
				</van-row>
			
				<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">Socket 测试结果</van-divider>
				<van-row>
					<van-col>结果：{{socket_testing.result}}</van-col>
				</van-row>
				
				<van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">Redis 测试结果</van-divider>
				<van-row>
					<van-col>结果：{{redis_testing.result}}</van-col>
				</van-row>
			</div>
		</van-action-sheet>
		
		<van-goods-action :safe-area-inset-bottom="true">
			<van-goods-action-button color="linear-gradient(to right, #ff6034, #FFD801)" 
									 text="试跑"
									 @click="handleBeing()" />
			<van-goods-action-button color="#FFD801" 
									 text="运行报告"
									 @click="ShowResults()" />
			<van-goods-action-button color="linear-gradient(to right, #FFD801, #ff6034)"
									 text="结束"
									 @click="handleEnd()" />
		</van-goods-action>
	</div>
</template>

<script>
import Vue from 'vue';
import { GoodsAction,GoodsActionButton,NavBar,Progress,Divider,ActionSheet } from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(NavBar);
Vue.use(Progress);
Vue.use(Divider);
Vue.use(ActionSheet);

export default {
	data() {
		return {
			view_title:'游戏服务环境测试',
			testingStatus:0,	//测试状态0,1,2
			api_testing:{ 
				percentage:'0', 
				text:'ready',
				result:'',
			},
			socket_testing:{
				percentage:'0', 
				text:'ready',
				result:'',
			},
			redis_testing:{ 
				percentage:'0', 
				text:'ready',
				result:'',
			},
			count_testing:{ 
				percentage:'0',
			},
			ShowRunningResults:false,
		}
	},
	created() {},
	methods: {
		handleBeing(){
			this.$dialog.confirm({
				message: '确定要开始测试吗',
				theme: 'round-button',
			}).then(() => {
				if (this.testingStatus != 1){
					this.testingStatus = 1;	//测试中
					//api_testing
					this.apiTesting();
				} else {
					this.$notify({ type: 'danger', message:'testing Repeat operation' });
				}
			}).catch(() => {});
		},
		apiTesting(){
			this.progressControl('api',25);
			this.count_testing.percentage = 10;

			this.$post('/server/testing', {'method':'api'}).then(res => {
				this.progressControl('api',66);
				this.count_testing.percentage = 18;
				
				if (res.code == 200 ){
					this.api_testing.percentage = '100';
					this.api_testing.text = 'success';
					this.api_testing.result = 'success';
					this.count_testing.percentage = 33;
					
					this.socketTesting();
				} 
			}).catch((e) => {
				this.api_testing.percentage = '100';
				this.api_testing.text = 'error';
				this.api_testing.result = e;
				this.count_testing.percentage = 33;
			});
		},
		socketTesting(){
			this.progressControl('socket',25);
			this.count_testing.percentage = 45;

			//连接
			this.socket = new WebSocket("ws://127.0.0.1:1998");
			this.progressControl('socket',66);
			this.count_testing.percentage = 50;
			
			//连接失败
			this.socket.onerror = function () { 
				this.socket_testing.percentage = '100';
				this.socket_testing.text = 'error';
				this.socket_testing.result = 'socket连接失败，请检查服务或地址与端口号';
				this.count_testing.percentage = 66;
			};
			//连接成功
			this.socket.onopen = function () {
				this.socket_testing.percentage = '100';
				this.socket_testing.text = 'success';
				this.socket_testing.result = 'success';
				this.count_testing.percentage = 66;
			};
			
			this.socket.close();
			this.redisTesting();
		},
		redisTesting(){
			this.progressControl('redis',25);
			this.count_testing.percentage = 79;
			
			this.$post('/server/testing', {'method':'redis'}).then(res => {
				this.progressControl('redis',66);
				this.count_testing.percentage = 84;
				
				if (res.code == 200 ){
					this.redis_testing.percentage = '100';
					this.redis_testing.text = 'success';
					this.redis_testing.result = 'success';
					this.count_testing.percentage = 100;
				} else {
					this.redis_testing.percentage = '100';
					this.redis_testing.text = 'error';
					this.redis_testing.result = res.msg;
					this.count_testing.percentage = 100;
				}
				this.ShowRunningResults = true;
				this.testingStatus = 2;
			}).catch((e) => {
				this.redis_testing.percentage = '100';
				this.redis_testing.text = 'error';
				this.redis_testing.result = e;
				this.count_testing.percentage = 99;
			});
		},
		progressControl(params,progress){
			if (params== 'api'){
				this.api_testing.percentage = progress;
				this.api_testing.text = progress+'%';
			} else if (params== 'socket'){
				this.socket_testing.percentage = progress;
				this.socket_testing.text = progress+'%';
			} else {
				this.redis_testing.percentage = progress;
				this.redis_testing.text = progress+'%';
			}
		},
		ShowResults(){
			if (this.testingStatus == 0) {
				this.$notify({ type: 'danger', message:'请先开始测试' });
			} else if (this.testingStatus == 0) {
				this.$notify({ type: 'danger', message:'测试过程中，请稍后重试' });
			} else {
				this.ShowRunningResults = true;
			}
		},
		handleEnd(){
			this.$dialog.confirm({
				message: '确定要结束测试吗',
				theme: 'round-button',
			}).then(() => {
				this.testingStatus = 0;
			}).catch(() => {});
		},
		onClickLeft() {
			if(this.testingStatus == 1){
				this.$notify({ type: 'danger', message:'测试状态中禁止退出' });
			} else {
				this.$router.go(-1);
			}
		},
	},
};
</script>

<style lang="less" scoped>
	.van-nav-bar {
		background-color:#FFD801;

		/deep/.van-nav-bar__content {
			.van-nav-bar__right {
				.van-nav-bar__text{
					color: white;
				}
			}
			.van-nav-bar__left {
				.van-nav-bar__text{
					color: white;
				}
				.van-icon {
					color: white;
				}
			}
		}
	}
	.content{
		margin-bottom: 100px;
		margin-left: 10px;
	}
	.contents{
		width: 92%;
		margin-top: 20%;
		margin-left: 3%;
	}
</style>
